<!doctype html>
<html>
<head>
<title>Pencil Code</title>
<meta name="description" content="Pencil is a collaborative programming site for drawing art, playing music, and creating games. Pencil is also a place to experiment with mathematical functions, geometry, graphing, webpages, simulations, and algorithms. Programs are open for all to see and copy.">
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Lato:400|Source+Code+Pro:400,700">
<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/welcome.css">
<link rel="stylesheet" type="text/css" href="//<!--#echo var="site"-->/lib/font-awesome.css">
<link rel="icon" sizes="192x192" href="//<!--#echo var="site"-->/apple-touch-icon.png">
<link rel="shortcut icon" sizes="16x16" href="//<!--#echo var="site"-->/favicon.ico" />
<style>
.loginblock button { min-width: 100%; }
</style>
<body>
<div id="overlay">
<div class="about" id="intro">
<h1 style="margin-top:0">About Pencil Code</h1>
<p>Pencil Code is a collaborative programming site for drawing
art, playing music, and creating games.  It is also
a place to experiment with mathematical functions, geometry,
graphing, webpages, simulations, and algorithms.  Programs are
open for all to see and copy.
<p><a target="_blank"
href="//www.youtube.com/watch?v=JJzFD4EdeuY"
data-vimeo="79743491"
>Watch a video overview</a> or
<a href="//www.youtube.com/watch?v=edN07wcbj2w"
data-vimeo="79743492" target="_blank"
>watch a video tutorial</a>.
</p>
<div id="video"></div>
<p>The main language is Coffeescript.  Professional software engineers
use Coffeescript to build complex websites, but Coffeescript code can
also be very simple.
<p>Pencil Code can also be used to explore and learn Javascript, HTML,
and CSS: when you are ready, just find the "gear" button to adjust languages.
<p>Programs preload the pencilcode library to use
turtle graphics functions.
Pencil Code is all <a href="/license.html" target="_blank">open source</a>.
Hang out on the <a href="/group" target="_blank">Pencil Code
discussion forum</a> or check out
<a href="//pencilcode.net/material/reference.pdf" target="_blank"
>the quick reference</a>
or
<a href="//guide.pencilcode.net/" target="_blank">the online guide</a>
to find out more.  There is also an illustrated
<a href="//pencilcode.net/book" target="_blank">Pencil Code book</a> with more than 100 small projects.
<p>Anybody can save programs and web pages, but read the
<a href="/terms.html" target="_blank">Terms of Service</a> and the
<a href="/privacy.html" target="_blank">Privacy Policy</a> first.
Two rules:
<p><u>Be Nice.</u> Do not mess up other peoples' work.
<strong>Do not post content that detracts from education on the site.</strong>
This a learning space that is not locked down
(for example, passwords are optional). So feel free to explore, create,
and link, but also please be considerate.
<p><u>Be Careful.</u> Do not depend on Pencil Code to keep your data safe.
Data posted here is public, and data is not secured from loss.
<strong>Do not post private or personally identifiable
information.</strong>  Passwords on Pencil Code
do not prevent malicious interference.
<p class="bottomnote"
><a href="/team.html">The Pencil Code Foundation</a>
is devoted to advancing computer
science education by making programming as simple and as
universal as using a pencil.
Contribute to the development of Pencil Code at
<a href="http://dev.pencilcode.net/" target="_blank"
>dev.pencilcode.net</a> or
<a href="https://github.com/PencilCode">github</a>.
&nbsp;&mdash;
<a href="mailto:info@pencilcode.net" target="_top"
>info@pencilcode.net</a>.
</div>
<form class="loginblock">
<label class="toggler">
<span id=msg></span>&nbsp; <i class="fa fa-sign-in loginicon"></i> Login</ul></label>
<label>Name: <input id=user></label>
<label>Password: <input type=password id=pass></label>
<label><button id=login>Login <span id=asuser></span></button></label>
</form>
</div>
<!-- end of overlay -->


<div class="container shadowcard">
<div class="row">
<div class="col-xs-6 vpadding">
<!-- branding -->
<a class="pclogo pull-left aboutlink" href="#about"><div class="pctext"><div class="pcline1">Pencil</div><div class="pcline2">Code</div></div><img src="/image/vpencil-20-64.png"></a>
</div>
<div class="col-xs-6 vpadding">
<!-- login bar -->
<ul class="pull-right list-inline"><li class="btn btn-clear" id="newaccount"><i class="fa fa-star newicon"></i> New Account<li class="btn btn-clear" style="opacity:0" id="showlogin"><i class="fa fa-sign-in loginicon"></i> Login</ul>
</div>
</div>
<!--# include file="promoline.html" -->
<!-- splash row -->
<div class="row topline">
<div class="col-sm-6 vpadding">
<h1 style="font-size:48px;margin:42px 0 10px;text-align:center;text-shadow:0 0 8px white;"><nobr>Dream it.</nobr> <nobr>Code it.</nobr></h1>
<p>Learn professional programming languages using
an editor that lets you work in either blocks or text.
Create art, music, games, and stories. Or
invent a program that will change the world.
<p style="text-align:center"><a class="btn btn-primary" style="font-size:133%" href="/edit/first">Let's play!</a>
</div>
<div class="col-sm-6 vpadding">
<iframe id="demo" style="min-height:300px;height:100%;width:100%;border:0"></iframe>
</div>
</div>
<div class="row topline">
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h3><a href="//gym.pencilcode.net/draw/" class="nofeedback"><img src="/image/art.png" style="height:74px"><br>Draw</a></h3>
<p><a href="//gym.pencilcode.net/draw/" class="btn btn-default" style="white-space:normal">Create art</a>
</div>
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h3><a href="//gym.pencilcode.net/jam/" class="nofeedback"><img src="/image/music.png" style="height:74px"
title="Image credit: http://www.clker.com/clipart-334772.html"><br>Jam</a></h3>
<p><a href="//gym.pencilcode.net/jam/" class="btn btn-default" style="white-space:normal">Make music</a>
</div>
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h3><a href="//gym.pencilcode.net/imagine/" class="nofeedback"><img src="/image/adventure.png" style="height:74px"
title="Image credit: http://jumpfer-stock.deviantart.com/art/Steam-Dragon-01-PNG-Stock-415712374"
><br>Imagine</a></h3>
<p><a href="//gym.pencilcode.net/imagine/" class="btn btn-default" style="white-space:normal">Code an adventure</a>
</div>
<div class="col-sm-3 col-xs-6 vpadding text-center">
<h2 style="padding:20px 0 0"><a class="nofeedback" title="Start from a blank program" href="/edit/myprogram">Get Creative</a></h2>
<p>Get some ideas for <a href="//gym.pencilcode.net/draw/">art</a>,
<a href="//gym.pencilcode.net/jam/">music</a>, or
<a href="//gym.pencilcode.net/imagine/">games</a>.  Or to code
anything, <a href="/edit/myprogram">start on a blank page</a>.
</div>
</div>
<div class="row topline">
<div class="col-sm-12 vpadding text-center">
<h2 style="padding:10px 0">Resources</h2>
<ul class="list-inline spaced">
<li><a class="aboutlink" href="#about">About Pencil Code</a>
<li><a href="//guide.pencilcode.net/">Material for Teachers</a>
<li><a href="//manual.pencilcode.net/">Teaching Manual</a>
<li><a href="//book.pencilcode.net/">Pencil Code Book</a>
</ul>
<ul class="list-inline spaced">
<li><a href="/edit/untitled">Open Blank Editor</a>
<li><a href="//share.pencilcode.net/">Shared Student Projects</a>
<li><a href="/home/">Browse All Users</a>
</ul>
<ul class="list-inline spaced">
<li><a href="//activity.pencilcode.net/">Printable Activities</a>
<li><a href="//blog.pencilcode.net/">Pencil Code Blog</a>
<li><a href="/team.html">Who We Are</a>
</ul>
</div>
</div>
<div class="row topline">
<div class="col-sm-12 vpadding text-center">
<p>Pencil Code supports CoffeeScript, Javascript, CSS, and HTML.
<p>Everything posted on Pencil Code is public and free to view, share,
and copy.
</div>
</div>
</div>
</body>
<script src="/lib/jquery.js"></script>
<script src="/lib/jquery.autocomplete.min.js"></script>
<script src="/lib/seedrandom.js"></script>
<script>
$(function() {

(function() {
  var usernames = {};
  $('#showlogin').css('opacity', 1);
  $('#user').on('change', validateUser);
  setInterval(validateUser, 1000);
  $('#user').autocomplete({
    autoSelectFirst: true,
    triggerSelectOnValidInput: false,
    serviceUrl: '/load/',
    paramName: 'prefix',
    preventBadQueries: false, // To allow exact-match probing.
    params: { count: 12 },
    transformResult: function(response) {
      response = JSON.parse(response);
      return {
        suggestions: response.list.filter(function(item) {
          return item.mode.indexOf('d') >= 0;
        }).map(function(item) {
          usernames[item.name] = true;
          return { value: item.name }
        })
      };
    },
    forceFixPosition: true,
    onSelect: function() { validateUser(); setTimeout(function() {
      if (!document.activeElement ||
          !$(document.activeElement).closest('.loginblock').length) {
        $('#pass').select().focus();
      }
    }, 0)}
  });
  function validateUser(e) {
    var user = $('#user').val().toLowerCase().trim();
    var found = usernames.hasOwnProperty(user);
    $('#asuser').text(found ? ' as ' + user : '');
    // $('#login').prop('disabled', !found);
    return true;
  };
  function keyFromPassword(username, p) {
    if (!p) { return ''; }
    if (/^[0-9]{3}$/.test(p)) { return p; }
    var key = '';
    var prng = new Math.seedrandom('turtlebits:' + username + ':' + p + '.');
    for (var j = 0; j < 3; j++) {
      key += Math.floor(prng() * 10);
    }
    return key;
  }
  $('#login').on('click', tryLogin);
  $('form.loginblock').on('submit', noSubmit);
  $('#pass,#user').on('keyup', function(e) {
    $('#msg').text('');
    if (e.which == 13) {
      if ($(this).attr('id') == 'user') {
        $('#pass').focus();
      } else {
        tryLogin();
      }
    }
  });
  function tryLogin() {
    var user = $('#user').val().toLowerCase().trim();
    if (!user) return;
    $('#msg').text('Logging in...');
    var key = keyFromPassword(user, $('#pass').val());
    $.getJSON('//' + user + '.' + location.hostname +
        '/save/?mode=setkey&key=' + key + '&data=' + key).done(function(resp) {
      if (resp.keyset || resp.keycleared) {
        window.location =
           '//' + user + '.' + location.hostname +
                '/edit/#login=' + user + ':' + (key ? key : '');
      } else {
        $('#pass').select().focus();
        $('#msg').text('Wrong password.');
      }
    }).fail(function() {
      $('#msg').text('Network error.');
    });
  }
  function noSubmit() {
    return false;
  }
})();

// Demo Animation
var index = 0;
var count = 3;
var sleeptime = +(new Date) + 100 * 1000;
function motion() {
  sleeptime = Math.max(sleeptime, +(new Date) + 30 * 1000);
}
function advance() {
  if (+(new Date) > sleeptime || $('#overlay').is(':visible')) return;
  document.getElementById('demo').src =
     "//promo.pencilcode.net/home/promo" + (index++);
  if (index >= count) { index = 0; }
}
// Now start the animation and things.
advance();
setInterval(advance, 26000);
window.addEventListener('mousemove', motion);
window.addEventListener('touchstart', motion);
// New account link
$('#newaccount').on('click', function() {
  window.location = '/edit/intro#new';
});
$('#showlogin').on('click', function() {
  if ($(this).css('opacity') == 0) return;
  $('#overlay,.loginblock').show();
  var ofs = $('#showlogin').offset();
  $('.loginblock').css({
    top: ofs.top - 8 + 1,
    right: $(document).width() - (ofs.left + $('#showlogin').outerWidth()) - 8
  });
  $('#user').focus();
});
$('a.aboutlink').click(function() {
  location.hash = '#about';
  $('#overlay,.about').show();
  return false;
});
function closeoverlay() {
 $('#video').html('');
 $('#overlay,.about,.loginblock').hide();
 if (location.hash.length > 1) {
   if (window.history.pushState) {
     window.history.pushState(null, null, window.location.pathname);
   } else {
     location.hash = '';
   }
 }
}
$('#overlay').click(function(e) {
  if (e.target == this || $(e.target).is('.loginblock .toggler')) {
    closeoverlay();
  }
});
$('#overlay').keydown(function(e) {
  if (e.which == 27) {
    closeoverlay();
  }
});
$(window).on('hashchange load', function() {
  if (/\babout\b/.test(location.hash)) {
    $('#overlay,.about').show();
  } else {
    $('#overlay,.about,.loginblock').hide();
  }
});
// Video clicking setup
// Detect if youtube is blocked.
var ytpresent = true;
var ytprobe = new Image();
ytprobe.onerror = function(){
  ytpresent = false;
};
ytprobe.src = "//youtube.com/favicon.ico?r=" + Math.random();
$('a[data-vimeo]').click(function(e) {
  if (ytpresent) {
    var href = $(this).attr('href');
    var match = /youtube.com.*v=([^&">]*)/.exec(href);
    if (match && match[1]) {
      if ($('#video iframe').attr('src') &&
          $('#video iframe').attr('src').indexOf(match[1]) >= 0) {
        $('#video').html('');
        return false;
      } else {
        $('#video').html(
          '<iframe type="text/html" width="640" height="390" ' +
          'src="//www.youtube.com/embed/' + match[1] +
          '?autoplay=1&origin=' +
          location.protocol + '//' + location.host + '" ' +
          'frameborder="0"></iframe>');
        return false;
      }
    }
  } else {
    var vimeo = $(this).data('vimeo');
    if (vimeo) {
      if ($('#video iframe').attr('src') &&
          $('#video iframe').attr('src').indexOf(vimeo) >= 0) {
        $('#video').html('');
        return false;
      } else {
        $('#video').html(
          '<iframe type="text/html" width="640" height="390" ' +
          'src="//player.vimeo.com/video/' + vimeo +
          '?autoplay=1" ' +
          'frameborder="0"></iframe>');
        return false;
      }
    }
  }
  return true;
});

function preload(urls) {
  for (var i = 0; i < urls.length; ++i) {
    var o = new Image();
    o.src = urls[i];
  }
}

window.pencilcode = {domain: location.hostname};

setTimeout(function() {
  preload(['/editor.js', '/editor.css', '/folder_32.png', '/droplet.css',
           '/lib/ace/ace.js', '/lib/ace/mode-coffee.js',
           '/lib/ace/theme-chrome.js', ]);
}, 700);

(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-45359764-1', window.pencilcode.domain);
ga('send', 'pageview');
});
</script>
</html>
